<!DOCTYPE html>
<html>
<head>
    <title>ICS 蓝色简约风格界面设计</title>
    <link rel="stylesheet" href="src/styles/theme.css">
    <link rel="stylesheet" href="src/styles/layout.css">
    <link rel="stylesheet" href="src/styles/components.css">
    <link rel="stylesheet" href="src/App.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            margin: 0;
            padding: 20px;
            background: var(--color-page);
            color: var(--color-text);
        }
        .demo-container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 20px;
            height: 600px;
        }
        .sidebar {
            background: var(--color-bg);
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }
        .main-content {
            background: var(--color-bg);
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .header {
            background: var(--color-bg);
            padding: 20px 24px;
            border-bottom: 1px solid var(--color-border);
        }
        .header-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .sidebar-toggle {
            background: var(--color-bg);
            border: 2px solid var(--color-border);
            color: var(--color-primary);
            padding: 10px 14px;
            border-radius: 12px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .sidebar-toggle:hover {
            background: var(--primary-a05);
            border-color: var(--color-primary);
            transform: translateY(-1px);
        }
        .logo {
            width: 32px;
            height: 32px;
            object-fit: contain;
            border-radius: 8px;
        }
        .title {
            font-size: 18px;
            font-weight: 600;
            color: var(--color-text);
        }
        .subtitle {
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
            color: white;
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 12px;
            font-weight: 500;
        }
        .messages {
            flex: 1;
            padding: 28px;
            overflow-y: auto;
        }
        .message {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            margin-bottom: 24px;
        }
        .bot-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 4px 16px var(--primary-a25);
            border: 3px solid var(--color-bg);
        }
        .message-content {
            max-width: 85%;
            padding: 18px 22px;
            border-radius: 20px;
            line-height: 1.6;
            background: var(--color-bg);
            border: 1px solid var(--color-border);
        }
        .user-message {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
            color: white;
            padding: 14px 18px;
            border-radius: 20px;
            max-width: 70%;
            line-height: 1.5;
            font-size: 15px;
            box-shadow: 0 3px 12px var(--primary-a25);
        }
        .user-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--color-primary-strong), var(--color-primary));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: white;
            box-shadow: 0 4px 16px var(--primary-a25);
            border: 3px solid var(--color-bg);
        }
        .input-area {
            padding: 20px 24px;
            background: var(--color-bg);
            border-top: 1px solid var(--color-border);
        }
        .input-container {
            background: var(--color-bg);
            border-radius: 24px;
            padding: 14px 18px;
            border: 2px solid var(--color-border);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .input-container:focus-within {
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px var(--primary-a10);
        }
        .send-btn {
            background: var(--color-primary);
            color: white;
            border: none;
            padding: 10px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px var(--primary-a15);
        }
        .send-btn:hover {
            background: var(--color-primary-strong);
            transform: scale(1.05);
            box-shadow: 0 4px 16px var(--primary-a25);
        }
        .design-showcase {
            margin-top: 30px;
            padding: 30px;
            background: var(--color-bg);
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }
    </style>
</head>
<body>
    <h1 style="text-align: center; margin-bottom: 30px; color: var(--color-text);">ICS 蓝色简约风格界面设计</h1>

    <div class="demo-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="sidebar-header">
                <button class="new-session-btn">+ 新建对话</button>
            </div>
            <div class="sessions-list">
                <div class="session-item">
                    <div class="session-content">
                        <div class="session-info">
                            <div class="session-title">你好</div>
                        </div>
                    </div>
                    <div class="session-actions">
                        <button class="session-menu-btn">⋯</button>
                    </div>
                </div>
                <div class="session-item active">
                    <div class="session-content">
                        <div class="session-info">
                            <div class="session-title">今年云启云区统计项为其他</div>
                        </div>
                    </div>
                    <div class="session-actions">
                        <button class="session-menu-btn">⋯</button>
                    </div>
                </div>
                <div class="session-item">
                    <div class="session-content">
                        <div class="session-info">
                            <div class="session-title">查询云启云区其他的指标今年的</div>
                        </div>
                    </div>
                    <div class="session-actions">
                        <button class="session-menu-btn">⋯</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <div class="header">
                <div class="header-left">
                    <button class="sidebar-toggle">☰</button>
                    <img src="public/assets/logo/logo.png" alt="Logo" class="logo" />
                    <div class="title">指标查询助手</div>
                    <div class="subtitle">AI助手</div>
                </div>
            </div>

            <div class="messages">
                <div class="message">
                    <div class="bot-avatar">🤖</div>
                    <div class="message-content">
                        您好！我是您的智能指标查询助手，我将帮您查询相关数据。
                    </div>
                </div>

                <div class="message user">
                    <div class="user-avatar">👤</div>
                    <div class="user-message">
                        今年云启云区洋芋的产量
                    </div>
                </div>
            </div>

            <div class="input-area">
                <div class="input-container">
                    <input type="text" class="message-input" placeholder="请输入您的问题..." />
                    <button class="send-btn">➤</button>
                </div>
            </div>
        </div>
    </div>

    <div class="design-showcase">
        <h2>🎨 设计特色</h2>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px;">
            <div style="padding: 20px; background: var(--primary-a05); border-radius: 12px;">
                <h3>🎯 简约美学</h3>
                <p>采用极简设计理念，减少视觉干扰，专注于内容呈现。</p>
            </div>
            <div style="padding: 20px; background: var(--primary-a05); border-radius: 12px;">
                <h3>🔷 蓝色主题</h3>
                <p>统一使用ICS蓝色系，建立品牌一致性和专业形象。</p>
            </div>
            <div style="padding: 20px; background: var(--primary-a05); border-radius: 12px;">
                <h3>✨ 现代交互</h3>
                <p>流畅的动画效果和直观的交互反馈，提升用户体验。</p>
            </div>
            <div style="padding: 20px; background: var(--primary-a05); border-radius: 12px;">
                <h3>📱 响应式设计</h3>
                <p>适配不同设备尺寸，确保在各种屏幕上都有良好体验。</p>
            </div>
        </div>
    </div>
</body>
</html>
